<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel 文件处理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f9;
        }

        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <button id="processButton">处理文件</button>
    <script>
        const processButton = document.getElementById('processButton');
        processButton.addEventListener('click', async () => {
            try {
                // 定义要修改的数据
                const modifications = {
                    B1: '此文件已被处理',
                    F9: 22.00,
                    C9: '测试文件内容替换'
                };

                // 发送POST请求
                const response = await fetch('/excelprocess', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(modifications) // 将修改数据作为请求体发送
                });

                if (response.ok) {
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = '修改后.xlsx';
                    a.click();
                    window.URL.revokeObjectURL(url); // 释放创建的对象URL
                } else {
                    const errorText = await response.text();
                    alert(`处理文件时出错: ${errorText}`);
                }
            } catch (error) {
                alert(`网络请求出错: ${error.message}`);
            }
        });
    </script>
</body>

</html>